<link href="{$base_dir}{$entry_file}/css/activeGrid.css" rel="stylesheet" type="text/css">

{if $template}
<div id="{$gridName}_template" style="display:none">
	<table>
{$template}
	</table>
</div>
{/if}

{*<pre id="debug"></pre>*}
<table cellpadding=0 cellspacing=0><tr><td style='vertical-align:top'>

	<table class="activeGrid grid" id="{$gridName}" style="width: {$gridWidth};" cellpadding="0" cellspacing="1">
		<thead>
			{$header}
		</thead>
		<tbody>
		</tbody>
	</table>
</td><td style='vertical-align:top'>
<div id="{$gridName}_scrollBar" class="scrollbar"></div>
</td></tr></table>

<script type="text/javascript" language="javascript">
	{$dsSetup}
	var imagePath = '{$base_dir}{$entry_file}/images';
	var dsInstance_{$gridName} = new clniDatasource(new {$stubName}(),{$gridName}_dsSetup);
	var gridInstance_{$gridName} = new clniGrid(dsInstance_{$gridName},{lcb}tableId:'{$gridName}',
					templateId:'{$gridName}_template',rows: {$gridRows},imagePath:imagePath{rcb} );
	var headHeight = document.getElementById('{$gridName}').tHead.getElementsByTagName('tr').item(0).clientHeight;
	var sbInstance_{$gridName} = new ScrollBar(
			{lcb}
				id:'{$gridName}_scrollBar',
				trackId:'{$gridName}_track',
				thumbId:'{$gridName}_gripper',
				imagePath:imagePath,
				totalElements:dsInstance_{$gridName}.numRows,
				maxScroll:dsInstance_{$gridName}.numRows-{$gridRows},
				visibleElements:{$gridRows},
				topOffset:headHeight
			{rcb});
	sbInstance_{$gridName}.onScroll = function(to) {lcb} gridInstance_{$gridName}.scrollTo(to); {rcb}
	gridInstance_{$gridName}.scrollBar = sbInstance_{$gridName};
</script>
